<template>
  <div class="fp-aside-extend-container"
       :class="{'fp-extended': isActived}">
    <div class="fp-aside-extend-panel">
      <slot></slot>
    </div>
    <div class="fp-aside-extend-close"
         :class="{'fp-extended-btn': isActived}"
         @click="setActiveItem({'id': 0, 'activated': false, 'extend': true})">
      <i class="btn-close"></i>
    </div>
  </div>
</template>

<script>

import {mapActions, mapGetters} from 'vuex'

export default {
  name: "FpAsideExtend",
  computed: {
    ...mapGetters({'isActived': 'aside/isActived'})
  },
  methods: {
    ...mapActions({
      'setActiveItem': 'aside/setActiveItem',
    })
  }
}
</script>

<style scoped>
.fp-aside-extend-container {
  position: absolute;
  bottom: 0;
  /*width: 270px;*/
  background-color: #fff;
  z-index: 1;
  box-sizing: initial;
  border-left: 1px solid #eef2f8;
  top: 55px;
  width: 328px;
  overflow: visible;
  box-shadow: 2px 0 12px #00000002;

  left: -263px;
  transition: left .3s ease-in-out;
}

.fp-aside-extend-container.fp-extended {
  left: 65px;
}

.fp-aside-extend-panel {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  /*background-color: #9da3ac;*/
}

.fp-aside-extend-close {
  position: absolute;
  top: 50%;
  margin-top: -32px;
  display: none;
  right: -20px;
  transition: right .3s ease-in-out;
}

.fp-extended-btn {
  display: block;
}

.btn-close {
  display: block;
  width: 20px;
  height: 64px;
  cursor: pointer;
  background-image: url();
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50%;
}

</style>